<template>
  <div class="fawen">
    <!-- 上 -->
    <div class="header">
      <div class="header header-box">
        <div class="headleft">
          <img class="logo shoushou" @click="toindex" src="../assets/logo.png" alt />
        </div>

        <div class="headright">
          <!-- <div v-if="tabtop!=5" class="headright-caogaoxiang" @click="tocaogaoxiang">草稿箱</div>

        <div v-if="tabtop==1" class="headright-cuncaogao" @click="fabu(2)">存草稿</div>
        <div v-if="tabtop==1" class="headright-fabu" @click="fabu(0)">发布</div>

        
        <div v-if="tabtop==5" class="headright-fabu" @click="fabuminv(0)">发布</div>

        <div v-if="tabtop==2" class="headright-cuncaogao" @click="fabuv(2)">存草稿</div>
        <div v-if="tabtop==2" class="headright-fabu" @click="fabuv(0)">发布</div>

        <div v-if="tabtop==3" class="headright-cuncaogao" @click="fabuwd(2)">存草稿</div>
        <div v-if="tabtop==3" class="headright-fabu" @click="fabuwd(0)">发布</div>

        <div v-if="tabtop==4" class="headright-cuncaogao" @click="fabuyoupiao(2)">存草稿</div>
          <div v-if="tabtop==4" class="headright-fabu" @click="fabuyoupiao(0)">发布</div>-->

          <div class="head-right-one">
            <img :src="userinfo.avatar" alt />
            <div>{{userinfo.nickname}}</div>
          </div>

          <div class="head-right-three shoushou" @click="showtuichu">
            <img src="../assets/tuichu.png" alt />
          </div>
        </div>
      </div>
    </div>

    <div class="headzhong tab">
      <div class="headzhong tab" style="width:1180px;">
        <img
          class="fanhui shoushou"
          style="margin-right:5px;"
          @click="toindex"
          src="../assets/fanhui.png"
          alt
        />
        <div class="headzhongitem shoushou" @click="tab(1)">
          <div>文章</div>
          <div v-if="tabtop==1" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem shoushou" @click="tab(5)">
          <div>小视频</div>
          <div v-if="tabtop==5" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem shoushou" @click="tab(2)">
          <div>视频</div>
          <div v-if="tabtop==2" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem shoushou" @click="tab(3)">
          <div>问答</div>
          <div v-if="tabtop==3" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem shoushou" @click="tab(4)">
          <div>投票</div>
          <div v-if="tabtop==4" class="xiahuaxian"></div>
        </div>
      </div>
    </div>

    <!-- 下 -->

    <div class="content">
      <div class="nr" v-if="tabtop==1">
        <div
          class="nr-box"
          style="font-size:16px;overflow:hidden;overflow-y: scroll;position: relative; "
        >
          <div class="biaotibox">
            <input
              class="biaoti"
              type="text"
              maxlength="30"
              v-model="title"
              placeholder="请输入标题(5~30个汉字)"
            />

            <div class="zitishi" v-if="title.length>0&&title.length<5">
              还需要输入
              <span style="color:#000;">{{5-title.length}}</span> 个字
            </div>
            <div class="zitishi" v-if="title.length>=5">{{title.length}}/30</div>
            <div class="xian"></div>
          </div>

          <ckeditor :editor="editor" @ready="onReady" v-model="editorData" :config="editorConfig"></ckeditor>
          <div class="xian"></div>
        </div>

        <div class="shezhi">
          <div class="df">
            <div class="biaotizi">展示封面:</div>
            <div>
              <div class="xuanzebox">
                <el-radio v-model="radio" label="1">单图</el-radio>
                <el-radio v-model="radio" label="2">三图</el-radio>
                <el-radio v-model="radio" label="3">无封面</el-radio>
              </div>

              <div class="selectimgbox" v-if="radio==2">
                <div class="selectitem">
                  <img
                    @click="delcurrent(0)"
                    class="dingweigb shoushou"
                    v-if="selectimglist[0]!=undefined"
                    src="../assets/guanbi1.png"
                    alt
                  />

                  <img class="shoushou" @click="showxttc" src="../assets/addimg.png" alt />

                  <img class="img" v-if="selectimglist[0]!=undefined" :src="selectimglist[0]" alt />
                </div>
                <div class="selectitem">
                  <img
                    @click="delcurrent(1)"
                    class="dingweigb shoushou"
                    v-if="selectimglist[1]!=undefined"
                    src="../assets/guanbi1.png"
                    alt
                  />

                  <img @click="showxttc " class="shoushou" src="../assets/addimg.png" alt />

                  <img class="img" v-if="selectimglist[1]!=undefined" :src="selectimglist[1]" alt />
                </div>
                <div class="selectitem">
                  <img
                    @click="delcurrent(2)"
                    class="dingweigb shoushou"
                    v-if="selectimglist[2]!=undefined"
                    src="../assets/guanbi1.png"
                    alt
                  />

                  <img @click="showxttc" class="shoushou" src="../assets/addimg.png" alt />

                  <img class="img" v-if="selectimglist[2]!=undefined" :src="selectimglist[2]" alt />
                </div>
              </div>

              <div class="selectimgbox" v-if="radio==1">
                <div class="selectitem">
                  <img
                    @click="delcurrent(0)"
                    class="dingweigb shoushou"
                    v-if="selectimglist[0]!=undefined"
                    src="../assets/guanbi1.png"
                    alt
                  />

                  <img @click="showxttc" class="shoushou" src="../assets/addimg.png" alt />

                  <img class="img" v-if="selectimglist[0]!=undefined" :src="selectimglist[0]" alt />
                </div>
              </div>

              <div v-if="radio!=3" class="dibutishi">优质的封面有利于推荐，格式支持JPEG、PNG</div>
            </div>
          </div>
          <div class="df" style="margin-top:57px;">
            <div class="biaotizi">话题选择:</div>
            <div>
              <el-select v-model="value" placeholder="请选择分类">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>

      <div class="nr" v-if="tabtop==5">
        <div class="shezhi" style="padding:37px 32px 173px;">
          <div class style="height:567px;position: relative;">
            <div class="biaotizi" style="font-size:20px;width:100%;">
              发布小视频
              <div class="videoyq">
                <div style="margin-bottom:10px">1、视频时长不超过60s，30s内的竖屏小视频推荐效果最佳</div>
                <div>2、无水印、高清晰度的视频效果更佳</div>
              </div>
            </div>
            <div class="videoselect">
              <div class="imgbox">
                <input
                  class="fenmianinput"
                  limit="1"
                  type="file"
                  accept="video/*"
                  @change="selectvideo($event,'min')"
                  name
                  id
                  ref="mininput"
                />
                <img
                  style="width:100%;height:100%;z-index:0;position: relative;"
                  src="../assets/addimgmin.png"
                  alt
                />
                <div class="shangchuanzi">上传视频</div>

                <div class="jindutiao-shang" v-if="l_video_name!=''">
                  <img
                    v-if="l_video_name!=''"
                    @click="delminvideo"
                    class="dingweigb shoushou"
                    src="../assets/guanbi1.png"
                    alt
                  />
                  <div class="jindutiao">
                    <div class="jindutiaozi">
                      <span style="max-width:65%;overflow:hidden;white-space:nowrap">{{l_video_name}}</span>...

                      <span>{{itemuplode.uploadRate}}%</span>
                    </div>
                    <div class="jindu_tiao">
                      <div class="nrtiao" :style="'width:'+ itemuplode.uploadRate +'%'"></div>
                    </div>

                    <div class="sc_shibai" v-if="itemuplode.upstatus==4">
                      上传失败，请<span style="color:#FF0052;" >重新上传</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="xian" style="bottom:64px;left:0;"></div>
          </div>
          <div class="df">
            <div class="biaotizi">展示封面:</div>
            <div>
              <div class="selectimgboxx">
                <div class="selectitem" style=" width:132px;height:223px;">
                  <input
                    class="fenmianinput"
                    limit="1"
                    type="file"
                    accept=".png, .jpg"
                    @change="minselectimg($event,'min')"
                    name
                    id
                  />
                  <img style="width:100%;height:100%;" src="../assets/addimgmin.png" alt />

                  <img
                    
                    v-if="minfengmian_temp!=''"
                    @click="delminfm"
                    class="dingweigb shoushou"
                    src="../assets/guanbi1.png"
                    alt
                  />
                  <img class="minvideofmtu" v-if="minfengmian_temp!=''" :src="minfengmian_temp" alt />
                </div>
              </div>

              <div class="dibutishi">优质的封面有利于推荐，格式支持JPEG、PNG</div>
            </div>
          </div>

          <div class="df" style="margin-top:57px;">
            <div class="biaotizi">视频描述:</div>
            <textarea placeholder="分享你此刻的心情" maxlength="50" class="mindesc" v-model="mindesc"></textarea>
          </div>
        </div>
      </div>

      <div class="nr" v-if="tabtop==2">
        <div class="shezhi" style="padding:37px 32px 173px;">
          <div class style="position: relative;">
            <div class="biaotizi" style="font-size:20px;width:100%;">
              发布视频
              <div class="videoyq">
                <div style="margin-bottom:10px">为了获得更高的推荐量和点击量，建议上传720P（1280x720）或更高分辨率的视频</div>
              </div>
            </div>
            <div
              class="videoselect"
              v-if="m_video_name==''"
              style="margin:88px 0 130px; height:200px;"
            >
              <div class="imgbox" style="width:170px;height:130px;">
                <img style="width:100%;height:100%;" src="../assets/video.png" alt />
                <div class="xuanzevidebtn">
                  选择视频
                  <input
                    class="fenmianinput"
                    limit="1"
                    type="file"
                    accept="video/*"
                    @change="selectvideo($event,'max')"
                    name
                    id
                    ref="maxinput"
                  />
                </div>
              </div>
            </div>

            <div class="maxjindubox" v-if="m_video_name!=''">
              <div class="shangzi">
                <div>
                  <span v-if="itemuplode.upstatus==1" class="yilei" style="margin-right:14px;">正在上传</span>
                  <span v-if="itemuplode.upstatus==2" class="yilei" style="margin-right:14px;">正在编译</span>
                  <span v-if="itemuplode.upstatus==3" class="yilei" style="margin-right:14px;">上传成功</span>

                  <span v-if="itemuplode.upstatus==4" class="yilei" style="margin-right:14px;color:red;">上传失败</span>

                  <span class="erlei">{{itemuplode.name}} 大小:{{itemuplode.daxiao}}MB</span>
                </div>

                <div>
                  <span class="yilei shoushou" style="margin-right:24px;" @click="chongxinshangchuan">重新上传</span>

                  <span class="yilei shoushou" @click='delmaxvideo'>删除</span>
                </div>
              </div>

              <div class="max-jindu-tiao">
                <div class="mjt_xin" :style="'width:'+ itemuplode.uploadRate +'%'"></div>
              </div>
            </div>
            <div style="width:100%;height:1px;"></div>
            <div class="xian" style="bottom:64px;left:0;"></div>
          </div>
          <div class="df">
            <div class="biaotizi">展示封面:</div>
            <div>
              <div class="selectitem" style=" margin-bottom:20px;">
                <input
                  class="fenmianinput"
                  limit="1"
                  type="file"
                  accept=".png, .jpg"
                  @change="minselectimg($event,'max')"
                  name
                  id
                />
                <img style="width:100%;height:100%;" src="../assets/addimg.png" alt />

                <img
                  v-if="maxfengmian_temp!=''"
                  @click="delmaxfm"
                  class="dingweigb shoushou"
                  src="../assets/guanbi1.png"
                  alt
                />
                <img
                  class="minvideofmtu"
                  style="width:156px;height:109px"
                  v-if="maxfengmian_temp!=''"
                  :src="maxfengmian_temp"
                  alt
                />
              </div>

              <div class="dibutishi">优质的封面有利于推荐，格式支持JPEG、PNG</div>
            </div>
          </div>
          <div class="df" style="margin-top:57px;">
            <div class="biaotizi">话题选择:</div>
            <div>
              <el-select v-model="value" placeholder="请选择分类">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="df" style="margin-top:57px;">
            <div class="biaotizi">视频标题:</div>
            <textarea placeholder="分享你此刻的心情" maxlength="30" class="mindesc" v-model="maxvtitle"></textarea>
          </div>
        </div>
      </div>
      <div class="nr" v-if="tabtop==3">
        <div class="shezhi" style="padding:56px 32px 173px;">
          <div class="wendanr">
            <input
              type="text"
              v-model="wt_title"
              placeholder="请输入问题标题(5~30个汉字)"
              maxlength="30"
              class="wendatitle"
            />

            <div class="zitishi" style="top:16px;" v-if="wt_title.length>0&&wt_title.length<5">
              还需要输入
              <span style="color:#000;">{{5-wt_title.length}}</span> 个字
            </div>
            <div class="zitishi" style="top:16px;" v-if="wt_title.length>=5">{{wt_title.length}}/30</div>

            <textarea
              name="text"
              v-model="wt_connect"
              class="wendatextarea"
              contenteditable="true"
              type="text"
              placeholder="请输入问题描述（5~200字）"
              maxlength="200"
            ></textarea>

            <div
              class="zitishi"
              style="bottom:26px; top:unset;"
              v-if="wt_connect.length>0&&wt_connect.length<5"
            >
              还需要输入
              <span style="color:#000;">{{5-wt_connect.length}}</span> 个字
            </div>
            <div
              class="zitishi"
              style="bottom:26px; top:unset;"
              v-if="wt_connect.length>=5"
            >{{wt_connect.length}}/30</div>
          </div>

          <div class="df" style="margin-top:57px;">
            <div class="biaotizi">悬赏值:</div>
            <div>
              <el-select v-model="lexunzhiselect" placeholder="请选择悬赏值">
                <el-option
                  v-for="item in lexunzhi"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="nr" v-if="tabtop==4">
        <div class="shezhi" style="padding:56px 32px 173px;">
          <div class="wendanr">
            <input type="text" placeholder="请输入投票标题(5~30个汉字)" v-model="tp_title" class="wendatitle" />

            <div class="zitishi" style="top:16px;" v-if="tp_title.length>0&&tp_title.length<5">
              还需要输入
              <span style="color:#000;">{{5-tp_title.length}}</span> 个字
            </div>
            <div class="zitishi" style="top:16px;" v-if="tp_title.length>=5">{{tp_title.length}}/30</div>

            <textarea
              name="text"
              v-model="tp_content"
              class="wendatextarea"
              contenteditable="true"
              type="text"
              placeholder="请输入投票描述（5~200字）"
            ></textarea>

            <div
              class="zitishi"
              style="bottom:26px; top:unset;"
              v-if="tp_content.length>0&&tp_content.length<5"
            >
              还需要输入
              <span style="color:#000;">{{5-tp_content.length}}</span> 个字
            </div>
            <div
              class="zitishi"
              style="bottom:26px; top:unset;"
              v-if="tp_content.length>=5"
            >{{tp_content.length}}/30</div>
          </div>

          <div class="df" style="margin-top:57px;">
            <div class="biaotizi">投票选项:</div>

            <div class="xuanxiangbox">
              <div class="xuanxiang" v-for="(item,index) in xuanxiang" :key="index">
                <input
                  type="text"
                  v-model="xuanxiang[index]"
                  maxlength="25"
                  placeholder="请输入选项(最大25字)"
                />
                <img class="shoushou" @click="delxuanxiang(index)" src="../assets/yichu1.png" alt />
              </div>

              <div class="tianjiaxuanxiang shoushou" @click="addxuanxiang">
                <div class="jia">+</div>
                <div>添加选项</div>
              </div>
            </div>
          </div>

          <!-- <div class="df" style="margin-top:57px;">
            <div class="biaotizi">话题选择:</div>
            <div>
              <el-select v-model="value" placeholder="请选择分类">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>-->
        </div>
      </div>
    </div>

    <div class="dibutiao">
      <div class="dibunr">
        <div class="left">
          <div class="huidingzi" v-if="tabtop!=3 && tabtop!=4">
            <span v-if="showzhiding==true" @click="backTop">回到顶部</span>

            <span v-if="showzhiding==false" @click="tofooter">发文设置</span>

            <img v-if="showzhiding==false" src="../assets/qushezhi.png" alt />

            <img v-if="showzhiding==true" src="../assets/zhiding.png" alt />
          </div>
          <div class="zishu">
            <span v-if="tabtop==1" style="margin-right:21px;">正文字数：{{zhengwenzishu}}</span>
            <!-- 已保存 -->
          </div>
        </div>
        <div class="left">
          <div v-if="tabtop==1" class="btn1 shoushou" @click="fabu(2)">存草稿</div>
          <div v-if="tabtop==1" class="btn2 shoushou" @click="fabu(0)">发布</div>

          <div v-if="tabtop==5" class="btn1 shoushou" @click="fabuminv(2)">存草稿</div>
          <div v-if="tabtop==5" class="btn2 shoushou" @click="fabuminv(0)">发布</div>

          <div v-if="tabtop==2" class="btn1 shoushou" @click="fabuv(2)">存草稿</div>
          <div v-if="tabtop==2" class="btn2 shoushou" @click="fabuv(0)">发布</div>

          <!-- <div v-if="tabtop==3" class="btn1" @click="fabuwd(2)">存草稿</div> -->
          <div v-if="tabtop==3" class="btn2 shoushou" @click="fabuwd(0)">发布</div>

          <!-- <div v-if="tabtop==4" class="btn1" @click="fabuyoupiao(2)">存草稿</div> -->
          <div v-if="tabtop==4" class="btn2 shoushou" @click="fabuyoupiao(0)">发布</div>
        </div>
      </div>
    </div>

    <!-- 退出弹框 -->
    <div class="tuichutc" v-if="showtuichutc == true">
      <div class="tuichubox">
        <div class="tuichuhead">
          <div>退出登录</div>
          <img class="shoushou" @click="quxiao_tcdl" src="../assets/guanbi.png" alt />
        </div>
        <div class="tuichuzhong">确定要退出当前登录吗？</div>
        <div class="tuichuxia">
          <div></div>
          <div class="tuichuanniu">
            <div class="quxiaoanniu shoushou" @click="quxiao_tcdl">取消</div>
            <div class="quedinganniu shoushou" @click="queding_tcdl">确定</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选图片弹窗 -->

    <div class="tuichutc" v-if="showxuantutc == true">
      <div class="xtnrbox">
        <div class="xtheader">
          <div class="tctitle">上传图片</div>
          <img class="shoushou" @click="tuichuxttc" src="../assets/guanbi.png" alt />
        </div>

        <div class="xttcnr">
          <div class="item" v-for="(item,index) in wenneiurllist" :key="index">
            <div class="xuanzexuanfu"></div>

            <div v-if="item.lablenum>0" class="labnum">{{item.lablenum}}</div>

            <img class="tuytu shoushou" @click="selectcurrent(item.url,index)" :src="item.url" alt />
            <div v-if="item.lablenum>0" @click="quxiaocurrent(item.url,index)" class="xtyinying shoushou"></div>
          </div>
        </div>

        <div class="xtbottom">
          <div v-if="radio==2" class="bottomzi">最多可选择3张，已选择{{this.selectimglist.length}}张</div>
          <div v-if="radio==1" class="bottomzi">最多可选择1张，已选择{{this.selectimglist.length}}张</div>

          <div class="btnbox">
            <div class="btn11 shoushou" @click="tuichuxttc">取消</div>
            <div class="btn12 shoushou" @click="tuichuxttc">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";

// const upload = require("../assets/js/upload");

export default {
  name: "fawen",
  data() {
    return {
      showtuichutc: false,
      showxuantutc: false,
      title: "",
      // 富文本
      editor: ClassicEditor,
      editorData: "",

      editorConfig: {
        removePlugins: ["MediaEmbed"], //除去视频按钮
        language: "zh-cn", //中文包
        placeholder: "请输入正文",
        ckfinder: {
          // uploadUrl:"http://hlx.51appdevelop.com/media/hairs/uplode_image",
          uploaded: 1,
          url: "/",
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        },

        // extraPlugins : [wordCount],

        // extraPlugins: [upload.MyCustomUploadAdapterPlugin],

        toolbar: [
          "heading", //段落
          "|", //分隔
          "bold", //加粗
          "italic", //倾斜
          "link", //超链接
          "bulletedList", //项目列表
          "numberedList", //编号列表
          "blockQuote", //块引用
          "undo", //撤销
          "redo", //重做
          "imageStyle:full", //图片通栏显示
          "imageStyle:side", //图片侧边显示
          // "imageTextAlternative", //更换图片替换文本
          "imageUpload", //插入图像
        ], //工具栏显示
      },
      // 单选
      radio: "1",
      xiaoshipinradio: "1",
      shipinradio: "1",

      // 下拉
      options: [],
      
      // 下拉

      //下拉id  分类id
      value: "",
      lexunzhi: [
        { value: 5 },
        { value: 10 },
        { value: 20 },
        { value: 50 },
        { value: 100 },
        { value: 200 },
      ],
      // index 乐讯币
      lexunzhiselect: "",
      tabtop: 1,
      userinfo: "",
      synopsis: "",

      //小视频
      l_video_name: "",
      l_video_file: "",
      minvideourl: "",
      mindesc: "",
      minfengmian_temp: "",
      minfengmian: "",

      //视频
      m_video_name: "",
      m_video_file: "",
      maxvideourl: "",
      maxfengmian_temp: "",
      maxfengmian: "",
      maxvtitle: "",

      //问题

      wt_connect: "",
      wt_title: "",

      // toupiao

      tp_title: "",
      tp_content: "",


      xuanxiang: ["", "", ""],
      loading: false,
      wenneiurllist: [],
      selectimglist: [],
      showzhiding: false,
      scrollTop: "",
      zhengwenzishu: 0,
      itemuplode: "",
    };
  },

  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
      // this.$router.go(0)

      var toptab = this.$route.query.toptab;
      console.log(toptab);
      this.tabtop = toptab;
    },
    editorData() {
      console.log(this.editorData);

      var list = this.editorData.match(/<p>(.*?)<\/p>/g);

      if (list.length > 0) {
        this.zhengwenzishu = list.join("").length - list.length * 7;
      }
    },
  },
  mounted() {
    if (!localStorage.getItem("uqid")) {
      this.$router.push({ path: "/login", query: {} });
      return;
    }

    this.getfenleilist();
    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
    // autotextarea

    var toptab = this.$route.query.toptab;

    console.log(toptab);

    this.tabtop = toptab;

    if (this.tabtop == 3) {
      var that = this;
      that.$nextTick(function () {
        that.autoTextarea(document.getElementById("autotext"), 0, 220);
        that.autoTextarea(document.getElementById("autotext2"), 0, 100);
      });
    }

    window.addEventListener("scroll", this.scrollToTop);

    //  this.findvideocover()
  },
  methods: {
    tofooter() {
      const that = this;
      // console.log(document.body.scrollHeight)
      document.documentElement.scrollTop = document.body.scrollTop =
        that.scrollTop + 1000;
    },
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        // console.log(2)
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;

        console.log(that.scrollTop);
        if (that.scrollTop <= 0) {
          clearInterval(timer);
        }
      }, 16);
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 100) {
        that.showzhiding = true;
      } else {
        that.showzhiding = false;
      }
    },
    delcurrent(index) {
      var url = this.selectimglist[index];
      this.selectimglist.splice(index, 1);

      this.wenneiurllist.forEach((element) => {
        element.lablenum = this.selectimglist.indexOf(element.url) + 1;
      });
    },

    delminfm() {
      this.minfengmian_temp = "";
      this.minfengmian = "";
    },

    delmaxfm() {
      this.maxfengmian_temp = "";
      this.maxfengmian = "";
    },

    delminvideo() {
      this.l_video_name = "";
      this.l_video_file = "";
      this.minvideourl = "";
      console.log(this.$refs.mininput.files)
      // this.$refs.mininput.files[0]=''
      this.itemuplode.xhr.abort()
    },

    delmaxvideo() {
      this.m_video_name = "";
      this.m_video_file = "";
      this.maxvideourl = "";
      //  this.$refs.maxinput.files=''
      this.itemuplode.xhr.abort()
    },

    chongxinshangchuan(){

      clearInterval(this.itemuplode.timer)
      this.itemuplode.xhr.abort()

      var fd=this.itemuplode.fd
      var name=this.itemuplode.name
      var file=this.itemuplode.file
      var  type=this.itemuplode.type

      this.itemuplode.uploadRate=0

      // this.itemuplode = {
      //   uploadRate: 0,
      //   fd: fd,
      //   upstatus: 0,
      //   timer: "",
      //   daxiao: "",
      //   name: "",
      //   xhr: "",
      //   // 1 中 2 转码 3 完成
      // };

      this.itemuplode.upstatus = 1;
      var that = this;
      var timer = setInterval(() => {
        var allmiao = Math.ceil(file.size / 1024 / 1024);

        var seep = 80 / allmiao;
        that.itemuplode.uploadRate += seep;

        if (that.itemuplode.uploadRate >= 79) {
          clearInterval(timer);
          that.itemuplode.upstatus = 2;
        }
      }, 1000);

      that.itemuplode.timer = timer;
      that.itemuplode.name = name;
      that.itemuplode.daxiao = file.size / 1024 / 1024;
      that.itemuplode.daxiao = that.itemuplode.daxiao.toFixed(2);

      var xhr = new XMLHttpRequest();

      that.itemuplode.xhr = xhr;

      xhr.open(
        "POST",
        this.$axios.defaults.baseURL + "media/hairs/im_uplode_file"
      );

      // xhr.setRequestHeader('Content-Type', 'multipart/form-data;' )

      xhr.send(fd);

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            var response = JSON.parse(xhr.response);

            console.log(response)

            if ((type = "min")) {
              that.minvideourl = response.data.url;

              that.itemuplode.uploadRate = 100;
              that.itemuplode.upstatus = 3;

              clearInterval(that.itemuplode.timer);
            }
            if ((type = "max")) {
              that.maxvideourl = response.data.url;

              that.itemuplode.uploadRate = 100;
              that.itemuplode.upstatus = 3;
              clearInterval(that.itemuplode.timer);
            }
          } else {
            that.$message({
              showClose: true,
              message: JSON.parse(xhr.response),
              type: "error",
            });

            that.itemuplode.upstatus = 4;
            clearInterval(that.itemuplode.timer);
          }
        }
      };
    },

    selectcurrent(url, index) {
      if (
        (this.radio == 1 && this.selectimglist.length < 1) ||
        (this.radio == 2 && this.selectimglist.length < 3)
      ) {
        this.selectimglist.push(url);
        this.wenneiurllist[index].select = true;
        this.wenneiurllist[index].lablenum =
          this.selectimglist.indexOf(url) + 1;
      } else {
        return;
      }
    },
    quxiaocurrent(url, index) {
      var index = this.selectimglist.indexOf(url);
      this.selectimglist.splice(index, 1);

      this.wenneiurllist.forEach((element) => {
        element.lablenum = this.selectimglist.indexOf(element.url) + 1;
      });
    },
    findvideocover() {
      console.log(111);
      let size = 320;
      // 获取video节点
      const video = document.getElementById("videoPlay");
      console.log(video);
      video.width = size;
      video.height = size;
      video.currentTime = 10; // 第一帧
      //创建canvas对象
    },

    toindex() {
      this.$router.push({ name: "indexbox", params: {} });
      this.$store.state.mianbaoxie = ["乐讯号", "主页", "活动"];
    },
    showtuichu() {
      console.log("aaaaa");
      this.showtuichutc = true;
    },
    quxiao_tcdl() {
      this.showtuichutc = false;
    },
    queding_tcdl() {
      localStorage.setItem("uqid", "");
      this.$router.push({ name: "login", params: {} });
    },
    s_lexunzhiselect(index) {
      this.lexunzhiselect = index;
    },
    tab(index) {
      this.tabtop = index;

      this.wenneiurllist = [];

      this.$router.push({ path: "/fawen2", query: { toptab: index } });

      // this.radio = "1";
      this.value = "";
    },
    onReady(editor) {
      // Insert the toolbar before the editable area.
      editor.ui
        .getEditableElement()
        .parentElement.insertBefore(
          editor.ui.view.toolbar.element,
          editor.ui.getEditableElement()
        );
      editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
        //let val = editor.getData();
        return {
          upload: async () => {
            return await loader.file
              .then((f) => {
                const F = new FileReader();
                F.readAsArrayBuffer(f);
                console.log(f);
                return new Promise((resolve) => {
                  F.onload = function () {
                    resolve({ bufAsArray: F.result, file: f });
                  };
                });
              })
              .then((v) => {
                //执行上传上传
                return this.uploadImgHook(v);

                // return {
                //     default: 'http://mmcl.maoming.gov.cn/ys/css/img/BG.png'
                // }
                //返回标准格式
                /*return {
                    default: 'http://mmcl.maoming.gov.cn/ys/css/img/BG.png'
                }*/
              });
          },
        };
      };
    },

    async uploadImgHook(v) {
      console.log(v);
      var fd = new FormData();
      fd.append("upload", v.file);
      var that = this;
      var url = "";
      await that
        .$axios({
          method: "post",
          url: "media/hairs/uplode_image",
          data: fd,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.error == "0") {
            console.log({ default: response.data.data.url });
            url = response.data.data.url;
            

          } else {
            that.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
            if (response.error == "4010") {
              this.$router.push({ path: "/login", query: {} });
              return;
            }
            if (response.error == "4011") {
              this.$router.push({ path: "/login", query: {} });
              return;
            }
            if (response.error == "4012") {
              this.$router.push({ path: "/login", query: {} });
              return;
            }
            if (response.error == "4014") {
              this.$router.push({ path: "/login", query: {} });
              return;
            }
          }
        });

      return {
        default: url,
      };
    },

    minselectimg(e, type) {
      if (type == "min") {
        var file = e.srcElement.files[0];
        this.minfengmian = file;

        var _this = this;
        var reader = new FileReader();
        reader.readAsDataURL(file);
        // this.img_templist.push(reader.result)
        reader.onload = function (e) {
          _this.minfengmian_temp = e.target.result;
        };
      } else if (type == "max") {
        var file = e.srcElement.files[0];
        this.maxfengmian = file;

        var _this = this;
        var reader = new FileReader();
        reader.readAsDataURL(file);
        // this.img_templist.push(reader.result)
        reader.onload = function (e) {
          _this.maxfengmian_temp = e.target.result;
        };
      }
    },

    getfenleilist() {
      // media/hairs/plates_list

      this.$get(
        // method: "get",
        "media/hairs/plates_list",
        {
          uqid: localStorage.getItem("uqid"),
        }
      ).then((response) => {
        console.log(response);
        if (response.error == "0") {
          response.data.forEach((element) => {
            this.options.push({
              value: element.id,
              label: element.name,
            });
          });
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error",
          });
          if (response.error == "4010") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4011") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4012") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4014") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
        }
      });
    },

    //发布文章
    fabu(type) {
      // uqid
      // plate_id
      // title
      // content
      // is_recall (0-正常发布 2-存为草稿箱)
      // cover
      // synopsis

      if (this.title == "") {
        this.$message({
          showClose: true,
          message: "标题不能为空",
          type: "error",
        });
        return;
      }
      if (this.title.length < 5) {
        this.$message({
          showClose: true,
          message: "标题不能少于五个字",
          type: "error",
        });
        return;
      }

      if (type == 0) {
        if (this.editorData == "") {
          this.$message({
            showClose: true,
            message: "正文不能为空",
            type: "error",
          });
          return;
        }

        if (this.radio == "1") {
          if (this.selectimglist.length < 1) {
            this.$message({
              showClose: true,
              message: "请选择图片",
              type: "error",
            });
            return;
          }
        } else if (this.radio == "2") {
          if (this.selectimglist.length < 3) {
            this.$message({
              showClose: true,
              message: "请选择图片",
              type: "error",
            });
            return;
          }
        }
        if (this.value == "") {
          this.$message({
            showClose: true,
            message: "请选择分类",
            type: "error",
          });

          return;
        }
      }

      var fd = new FormData();
      fd.append("uqid", localStorage.getItem("uqid"));

      fd.append("plate_id", this.value);

      fd.append("title", this.title);
      fd.append("content", this.editorData);
      fd.append("is_recall", type);

      if (this.radio == "1") {
        fd.append("cover[0]", this.selectimglist[0] || "");
      } else if (this.radio == "2") {
        fd.append("cover[0]", this.selectimglist[0] || "");
        fd.append("cover[1]", this.selectimglist[1] || "");
        fd.append("cover[2]", this.selectimglist[2] || "");
      }

      this.$axios({
        method: "post",
        url: "media/hairs/graphic_add",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((response) => {
        console.log(response);
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success",
              // duration:0
            });

            this.fabuchenggonghou();
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success",
            });
            this.ccgchenggonghou();
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error",
          });
          if (response.error == "4010") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4011") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4012") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4014") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
        }
      });
    },

    //发布小视频
    fabuminv(type) {
      // desc
      // is_recall
      // 0-正常 2-存为草稿
      // cover
      // video
      if (type == 0) {
        if (this.l_video_name == "") {
          this.$message({
            showClose: true,
            message: "请选择视频",
            type: "error",
          });
          return;
        }
        if (this.minvideourl == "") {
          this.$message({
            showClose: true,
            message: "请等待视频上传完毕",
            type: "error",
          });
          return;
        }

        if (this.minfengmian == "") {
          this.$message({
            showClose: true,
            message: "请选择封面图",
            type: "error",
          });

          return;
        }

        if (this.mindesc == "") {
          this.$message({
            showClose: true,
            message: "视频描述不能为空",
            type: "error",
          });
          return;
        }
      } else {
        if (this.l_video_name == "") {
          this.$message({
            showClose: true,
            message: "请选择视频",
            type: "error",
          });
          return;
        }
        if (this.minvideourl == "") {
          this.$message({
            showClose: true,
            message: "请等待视频上传完毕",
            type: "error",
          });
          return;
        }
      }

      var fd = new FormData();
      fd.append("uqid", localStorage.getItem("uqid"));
      fd.append("desc", this.mindesc);
      fd.append("cover", this.minfengmian || "");
      fd.append("video_url", this.minvideourl);

      fd.append("file_name", this.l_video_name);
      fd.append("is_recall", type);

      this.$axios({
        method: "post",
        url: "media/hairs/short_video_add",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((response) => {
        console.log(response);
        this.loading = false;
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success",
            });
            this.fabuchenggonghou();
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success",
            });
            this.ccgchenggonghou();
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error",
          });
        }
      });
    },
    //发布视频
    fabuv(type) {
      //  maxvtitle:'',
      // maxvdesc:"",

      if (this.video_name == "") {
        this.$message({
          showClose: true,
          message: "请选择视频",
          type: "error",
        });
        return;
      }
      if (this.maxvideourl == "") {
        this.$message({
          showClose: true,
          message: "请选等待上传完毕",
          type: "error",
        });
        return;
      }

      if (type == 0) {
        if (this.maxfengmian_temp == "") {
          this.$message({
            showClose: true,
            message: "请选择封面图",
            type: "error",
          });

          return;
        }
        if (this.value == "") {
          this.$message({
            showClose: true,
            message: "请选择分类",
            type: "error",
          });
          return;
        }

        if (this.maxvtitle == "") {
          this.$message({
            showClose: true,
            message: "视频标题不能为空",
            type: "error",
          });
          return;
        }
      }

      this.loading = true;
      var fd = new FormData();
      fd.append("uqid", localStorage.getItem("uqid"));

      fd.append("cover", this.maxfengmian);

      fd.append("video", this.maxvideourl);
      fd.append("title", this.maxvtitle);
      fd.append("file_name", this.m_video_name);
      fd.append("plate_id", this.value);
      fd.append("is_recall", type);

      this.$axios({
        method: "post",
        url: "media/hairs/video_add",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((response) => {
        console.log(response);
        this.loading = false;
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success",
            });
            this.fabuchenggonghou();
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success",
            });
            this.ccgchenggonghou();
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error",
          });
          if (response.error == "4010") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4011") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4012") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4014") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
        }
      });
    },

    //发布问答
    fabuwd(type) {
      // uqid
      // title
      // content
      // is_recall
      // 0-正常 2-存为草稿
      // bounty_gold
      if (this.wt_title == "") {
        this.$message({
          showClose: true,
          message: "问题标题不能为空",
          type: "error",
        });
        return;
      }

      if (this.wt_title.length < 5) {
        this.$message({
          showClose: true,
          message: "标题不能少于五个字",
          type: "error",
        });
        return;
      }

      if (type == 0) {
        if (this.wt_connect == "") {
          this.$message({
            showClose: true,
            message: "问题内容不能为空",
            type: "error",
          });
          return;
        }

        if (this.wt_connect.length < 5) {
          this.$message({
            showClose: true,
            message: "问题内容不能少于五个字",
            type: "error",
          });
          return;
        }

        if (this.lexunzhiselect == "") {
          this.$message({
            showClose: true,
            message: "请选择悬赏值",
            type: "error",
          });
          return;
        }
      }

      var fd = new FormData();
      fd.append("uqid", localStorage.getItem("uqid"));

      fd.append("content", this.wt_connect);

      fd.append("title", this.wt_title);

      fd.append("bounty_gold", this.lexunzhiselect);

      fd.append("is_recall", type);

      this.$axios({
        method: "post",
        url: "media/hairs/solve_add",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((response) => {
        console.log(response);
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success",
            });
            this.fabuchenggonghou();
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success",
            });
            this.ccgchenggonghou();
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error",
          });

          if (response.error == "4010") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4011") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4012") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4014") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
        }
      });
    },

    //发布投票

    fabuyoupiao(type) {
      // uqid
      // title
      // desc
      // is_recall
      // 0-正常 2-存为草稿
      // option
      if (this.tp_title == "") {
        this.$message({
          showClose: true,
          message: "投票标题不能为空",
          type: "error",
        });
        return;
      }

      if (this.tp_title.length < 5) {
        this.$message({
          showClose: true,
          message: "投票标题不能少于五个字",
          type: "error",
        });
        return;
      }

      if (this.tp_content == "") {
        this.$message({
          showClose: true,
          message: "投票内容不能为空",
          type: "error",
        });
        return;
      }

      if (this.tp_content.length < 5) {
        this.$message({
          showClose: true,
          message: "投票内容不能少于五个字",
          type: "error",
        });
        return;
      }

      if (this.xuanxiang.length < 2) {
        this.$message({
          showClose: true,
          message: "选项最少两个",
          type: "error",
        });
        return;
      }

      var flag = false;
      for (var i = 0; i < this.xuanxiang.length; i++) {
        if (this.xuanxiang[i] == "") {
          flag = true;
          break;
        }
      }
      if (flag) {
        this.$message({
          showClose: true,
          message: "不能有空的选项内容",
          type: "error",
        });
      }

      console.log(this.xuanxiang);
      this.$axios({
        method: "post",
        url: "media/hairs/vote_add",
        data: this.$qs.stringify({
          uqid: localStorage.getItem("uqid"),
          desc: this.tp_content,
          title: this.tp_title,
          option: this.xuanxiang,
          is_recall: type,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((response) => {
        console.log(response);
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success",
            });
            this.fabuchenggonghou();
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success",
            });
            this.ccgchenggonghou();
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error",
          });
        }
      });
    },

    fabuchenggonghou() {
      // this.$router.push({ name: "nrguanli", params: {} });

      this.$router.push({ path: "index/nrguanli", query: {type:this.tabtop,status:0} });
      this.$store.state.mianbaoxie = ["乐讯号", "内容管理"];
    },
    ccgchenggonghou() {
      if(this.tabtop!=3&&this.tabtop!=4){
        this.$router.push({ path: "index/nrguanli", query: {type:this.tabtop,status:4} });
      }else{
        this.$router.push({ path: "index/nrguanli", query: {type:this.tabtop,status:0} });
      }

      this.$store.state.mianbaoxie = ["乐讯号", "内容管理"];
      // this.$store.state.mianbaoxie=['乐讯号','内容管理','文章']
    },

    tocaogaoxiang() {
      this.$router.push({
        path: "/caogaoxiang",
        query: { toptab: this.tabtop },
      });
    },

    selectvideo(e, type) {
      var file = e.srcElement.files[0];
      console.log(file);
      var that = this;
      if (type == "min") {
        var fileurl = URL.createObjectURL(file);
        var audioElement = new Audio(fileurl);

        audioElement.addEventListener("loadedmetadata", function (_event) {
          var duration = audioElement.duration;
          console.log(duration);

          if (duration > 60) {
            that.$message({
              showClose: true,
              message: "视频时长不能超过60s",
              type: "error",
            });
          } else {
            that.l_video_name = file.name;
            that.l_video_file = file;
            that.videoshangchuan(that.l_video_name, that.l_video_file, "min");
          }
        });
      }

      if (type == "max") {
        if (file.size > 500 * 1024 * 1024) {
          that.$message({
            showClose: true,
            message: "视频大小不能超过500m",
            type: "error",
          });
        } else {
          that.m_video_name = file.name;
          that.m_video_file = file;

          that.videoshangchuan(that.m_video_name, that.m_video_file, "max");
        }
      }
    },
    videoshangchuan(name, file, type) {
      var fd = new FormData();
      fd.append("video", file);
      var that = this;

      this.itemuplode = {
        uploadRate: 0,
        fd: fd,
        upstatus: 0,
        timer: "",
        daxiao: "",
        name: "",
        xhr: "",
        type:type,
        file:file
        // 1 中 2 转码 3 完成
      };
      this.itemuplode.upstatus = 1;
      var that = this;
      var timer = setInterval(() => {
        var allmiao = Math.ceil(file.size / 1024 / 1024);

        var seep = 80 / allmiao;
        that.itemuplode.uploadRate += seep;

        if (that.itemuplode.uploadRate >= 79) {
          clearInterval(timer);
          that.itemuplode.upstatus = 2;
        }
      }, 1000);

      that.itemuplode.timer = timer;
      that.itemuplode.name = name;
      that.itemuplode.daxiao = file.size / 1024 / 1024;
      that.itemuplode.daxiao = that.itemuplode.daxiao.toFixed(2);

      var xhr = new XMLHttpRequest();

      that.itemuplode.xhr = xhr;

      xhr.open(
        "POST",
        this.$axios.defaults.baseURL + "media/hairs/im_uplode_file"
      );

      // xhr.setRequestHeader('Content-Type', 'multipart/form-data;' )

      xhr.send(fd);

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            var response = JSON.parse(xhr.response);

            console.log(response)

            if ((type = "min")) {
              that.minvideourl = response.data.url;

              that.itemuplode.uploadRate = 100;
              that.itemuplode.upstatus = 3;

              clearInterval(that.itemuplode.timer);
            }
            if ((type = "max")) {
              that.maxvideourl = response.data.url;

              that.itemuplode.uploadRate = 100;
              that.itemuplode.upstatus = 3;
              clearInterval(that.itemuplode.timer);
            }
          } else {
            that.$message({
              showClose: true,
              message: JSON.parse(xhr.response),
              type: "error",
            });

            that.itemuplode.upstatus = 4;
            clearInterval(that.itemuplode.timer);
          }
        }
      };
    },

    quxiao(type) {
      if (type == "min") {
        this.l_video_name = "";
        this.l_video_file = "";
      }
      if (type == "max") {
        this.video_name = "";
        this.video_file = "";
      }
    },

    autoTextarea(elem, extra, maxHeight) {
      extra = extra || 0;
      var isFirefox = !!document.getBoxObjectFor || "mozInnerScreenX" in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf("Opera"),
        addEvent = function (type, callback) {
          elem.addEventListener
            ? elem.addEventListener(type, callback, false)
            : elem.attachEvent("on" + type, callback);
        },
        getStyle = elem.currentStyle
          ? function (name) {
              var val = elem.currentStyle[name];
              if (name === "height" && val.search(/px/i) !== 1) {
                var rect = elem.getBoundingClientRect();
                return (
                  rect.bottom -
                  rect.top -
                  parseFloat(getStyle("paddingTop")) -
                  parseFloat(getStyle("paddingBottom")) +
                  "px"
                );
              }
              return val;
            }
          : function (name) {
              return getComputedStyle(elem, null)[name];
            },
        minHeight = parseFloat(getStyle("height"));
      elem.style.resize = "both"; //如果不希望使用者可以自由的伸展textarea的高宽可以设置其他值

      var change = function () {
        var scrollTop,
          height,
          padding = 0,
          style = elem.style;

        if (elem._length === elem.value.length) return;
        elem._length = elem.value.length;

        if (!isFirefox && !isOpera) {
          padding =
            parseInt(getStyle("paddingTop")) +
            parseInt(getStyle("paddingBottom"));
        }
        scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop;

        elem.style.height = minHeight + "px";
        if (elem.scrollHeight > minHeight) {
          if (maxHeight && elem.scrollHeight > maxHeight) {
            height = maxHeight - padding;
            style.overflowY = "auto";
          } else {
            height = elem.scrollHeight - padding;
            style.overflowY = "hidden";
          }
          style.height = height + extra + "px";
          scrollTop += parseInt(style.height) - elem.currHeight;
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          elem.currHeight = parseInt(style.height);
        }
      };

      addEvent("propertychange", change);
      addEvent("input", change);
      addEvent("focus", change);
      change();
    },

    delxuanxiang(index) {},
    addxuanxiang() {
      this.xuanxiang.push("");
    },

    delxuanxiang(index) {
      this.xuanxiang.splice(index, 1);
    },

    tuichuxttc() {
      this.showxuantutc = false;
    },

    showxttc() {
      this.showxuantutc = true;
      this.wenneiurllist=[]
      //过滤
      var str=this.editorData
     
      var imgReg = /<img.*?(?:>|\/>)/gi;
      var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
      var arr = str.match(imgReg);  
      // arr 为包含所有img标签的数组

      for (var i = 0; i < arr.length; i++) {
        var src = arr[i].match(srcReg);
        //获取图片地址
        // console.log('图片地址'+(i+1)+'：'+src[1]);

        this.wenneiurllist.push({url:src[1],lablenum:0})
      }
  },
}}
</script>

<style scoped>
.sc_shibai{
  font-size:14px;
  font-weight:400;
  line-height:20px;
  color:#333333;
  text-align: center;
  margin-top:23px;
}
.yilei {
  font-size: 14px;

  font-weight: 550;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
}
.erlei {
  font-size: 12px;

  font-weight: 400;
  line-height: 17px;
  color: rgba(92, 92, 92, 1);
}
.max-jindu-tiao {
  width: 884px;
  height: 6px;
  background: rgba(216, 216, 216, 1);
  opacity: 1;
  border-radius: 500px;
  position: relative;
  margin-top: 11px;
}
.mjt_xin {
  /* width:750px; */
  height: 6px;
  background: rgba(0, 170, 84, 1);
  opacity: 1;
  border-radius: 500px;
  position: absolute;
  top: 0;
  left: 0;
}

.shangzi {
  width: 884px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 19px;
}
.maxjindubox {
  width: 1016px;
  height: 76px;
  background: rgba(250, 250, 250, 1);
  opacity: 1;
  border-radius: 4px;
  /* padding:88px 0; */
  margin: 88px auto 130px;

  display: flex;
  align-items: center;
  flex-direction: column;
}
.selectitem .minvideofmtu:hover .selectitem .dingweigb {
  display: block;
}
.minvideofmtu {
  width: 130px;
  height: 221px;
  background-color: #eee;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.jindutiao-shang:hover .dingweigb {
  display: block;
}
.jindutiao-shang {
  width: 218px;
  height: 348px;
  position: absolute;
  background-color: #fafafa;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.jindutiao {
  width: 176px;
  height: 44px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.jindutiaozi {
  font-size: 16px;
  font-weight: 550;
  line-height: 22px;
  color: rgba(92, 92, 92, 1);
  display: flex;
  justify-content: space-between;
}
.jindu_tiao {
  margin-top: 18px;
  width: 176px;
  height: 4px;
  background: rgba(216, 216, 216, 1);
  opacity: 1;
  border-radius: 500px;
}
.nrtiao {
  /* width:100px; */
  height: 4px;
  background: rgba(0, 170, 84, 1);
  opacity: 1;
  border-radius: 500px;
}

.zitishi {
  position: absolute;
  top: 56px;
  right: 50px;
  font-size: 10px;
  color: #999;
}
.tuytu {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #eee;
}
.dingweigb {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 11;
  display: none;
}

.tianjiaxuanxiang {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(38, 106, 255, 1);
  opacity: 1;
  margin-top: 9px;
  display: flex;
  align-items: center;
}
.tianjiaxuanxiang .jia {
  margin-right: 6px;
  font-size: 20px;
}
.xuanxiangbox {
  flex-direction: column;
}

.xuanxiang {
  width: 100%;
  height: 37px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.xuanxiang input {
  width: 484px;
  height: 37px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  outline: none;
  padding: 10px 13px;
  box-sizing: border-box;
  margin-right: 8px;
}
.xuanxiang img {
  width: 18px;
  height: 18px;
}
.wendatextarea {
  border: none;
  width: 100%;
  font-size: 16px;

  margin-top: 11px;
  line-height: 20px;
  text-indent: 0px;
  min-height: 220px;
}
.wendatextarea:focus {
  border: none;
}
.wendatitle {
  font-size: 24px;
  font-weight: 400;
  line-height: 33px;
  opacity: 1;
  width: 100%;
  padding-bottom: 26px;
  border-bottom: 1px solid #e8e8e8;
}
.wendanr {
  width: 100%;
  height: 320px;
  position: relative;
  border-bottom: 1px solid #e8e8e8;
}
.xuanzexuanfu {
  width: 23px;
  height: 23px;
  background: rgba(51, 51, 51, 0.46);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  opacity: 1;
  position: absolute;
  top: 11px;
  left: 9px;
  display: none;
}
.labnum {
  width: 23px;
  height: 23px;
  background: rgba(38, 106, 255, 1);
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  position: absolute;
  top: 11px;
  left: 9px;
  text-align: center;
  line-height: 23px;
  z-index: 11;
}
.xtyinying {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.xttcnr {
  position: absolute;
  top: 57px;
  display: flex;
  padding: 21px 29px;
  box-sizing: border-box;
   flex-wrap:wrap;
}
.xttcnr .item {
  width: 149px;
  height: 148px;
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  position: relative;
  margin-right: 20px;
}

.item:hover .xuanzexuanfu {
  display: block;
}

.btn11 {
  width: 86px;
  height: 42px;
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 16px;

  font-weight: 400;
  line-height: 42px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 22px;
}
.btn12 {
  width: 86px;
  height: 42px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 16px;

  font-weight: 400;
  line-height: 42px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.btnbox {
  display: flex;
}
.tctitle {
  font-size: 16px;

  font-weight: 400;
  line-height: 24px;
  color: rgba(51, 51, 51, 1);
}
.bottomzi {
  font-size: 12px;

  font-weight: 400;
  line-height: 24px;
  color: rgba(153, 153, 153, 1);
}
.xtbottom {
  width: 100%;
  height: 73px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e8e8e8;

  padding: 0 29px;

  box-sizing: border-box;
}
.xtheader {
  width: 100%;
  height: 57px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  padding: 0 29px;
  align-items: center;
  box-sizing: border-box;
}
.xtnrbox {
  width: 1055px;
  height: 659px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.xuanzevidebtn {
  position: relative;
  width: 101px;
  height: 36px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;

  font-size: 14px;
  margin: 28px auto 0;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}
.mindesc {
  width: 860px;
  height: 78px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
}
.videoselect {
  width: 100%;
  margin-top: 35px;
}
.videoselect .imgbox {
  width: 220px;
  height: 350px;
  margin: auto;
  position: relative;
}
.fenmianinput {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 5;
}
.shangchuanzi {
  font-size: 14px;

  font-weight: 400;
  line-height: 20px;
  color: rgba(92, 92, 92, 1);
  position: absolute;
  top: 186px;
  left: 50%;
  transform: translate(-50%, 0);
}
.videoyq {
  font-size: 12px;
  margin-top: 17px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(172, 172, 172, 1);
}
.btn1 {
  width: 70px;
  height: 36px;
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
  color: rgba(172, 172, 172, 1);

  text-align: center;
  margin-right: 20px;
}
.btn2 {
  width: 70px;
  height: 36px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.left {
  display: flex;
}
.zishu {
  font-size: 12px;

  font-weight: 400;
  line-height: 17px;
  color: rgba(172, 172, 172, 1);
}

.huidingzi {
  font-size: 12px;

  font-weight: 400;
  line-height: 17px;
  color: rgba(92, 92, 92, 1);
}
.huidingzi img {
  margin: 0 17px 0 7px;
}
.header-box {
  width: 1180px !important;
  margin: auto;
}
.dibunr {
  width: 1080px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}
.dibutiao {
  width: 100%;
  height: 76px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
}
.dibutishi {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(172, 172, 172, 1);
}

.selectimgbox {
  padding: 22px 0 17px;
  display: flex;
  align-items: center;
}
.selectimgboxx {
  padding: 0px 0 17px;
  display: flex;
  align-items: center;
}
.selectitem {
  margin-right: 13px;
  width: 158px;
  height: 111px;
  position: relative;
}
.selectitem:hover .dingweigb {
  display: block;
}
.selectitem .img {
  z-index: 10;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eee;
}
.xuanzebox {
  height: 22px;
  display: flex;
  align-items: center;
}
.content {
  width: 100%;
  min-height: 90vh;
  background: rgba(242, 242, 242, 1);
}
.nr {
  width: 1080px;
  margin: 0px auto 0;
  padding-top: 20px;
}
.tab {
  height: 62px;
  width: 100%;
  /* padding: 0 103px; */
  background: #fff;
  line-height: 62px;
  box-sizing: border-box;
  margin: auto;
}
.shezhi {
  width: 100%;
  background: #fff;
  padding: 60px 32px 173px;
  box-sizing: border-box;
}
.biaotizi {
  font-size: 16px;
  width: 70px;
  font-weight: 550;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  margin-right: 75px;
}
.df {
  display: flex;
  align-items: flex-start;
}

/* <!-- 退出弹框 --> */
.tuichutc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.tuichubox {
  width: 499px;
  height: 156px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 4px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
}
.tuichuhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.tuichuhead > div {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.tuichuhead > img {
  width: 11px;
  height: 11px;
}
.tuichuzhong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 14px;
}
.tuichuxia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.tuichuanniu {
  display: flex;
  align-items: center;
}
.quxiaoanniu {
  width: 62px;
  height: 26px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 20px;
}
.quedinganniu {
  width: 62px;
  height: 26px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

/* ############ */
.zishuxz {
  margin-right: 30px;
  font-size: 10px;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
}
.fengmianimg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;

  object-fit: contain;
  background: #eee;
}
.content-right {
  width: 868px;
  position: relative;
  background-color: #fff;
  height: calc(100vh - 150px);
}
.biaoti {
  font-size: 28px;
  position: absolute;
  top: 50px;
  left: 32px;
  z-index: 10;
  width: 1016px;
}
.xian {
  width: 1016px;
  height: 1px;
  background-color: #e8e8e8;
  position: absolute;

  bottom: 1px;
  left: 32px;
}

.biaotibox {
  width: 100%;
  height: 100px;
  position: absolute;

  top: 48px;
  left: 0px;
  background-color: #fff;
  z-index: 10;
}
.fawen {
  font-size: 14px;
  width: 100%;
  height: 100%;
  background: rgba(242, 242, 242, 1);
}
/* 上 */
.header {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid #e8e8e8;
}
.headleft {
  display: flex;
  align-items: center;
}
.headleft .fanhui {
  width: 8px;
  height: 12px;
  margin-left: 15px;
  margin-right: 9px;
}
.headleft .logo {
  width: 89px;
  height: 30px;
}
.headzhong {
  display: flex;
  align-items: center;

  font-size: 16px;
  font-weight: 400;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.headzhongitem {
  position: relative;
  width: 48px;
  height: 100%;
  font-weight: 550;
  margin-right: 41px;
  text-align: center;
}
.headzhongitem .xiahuaxian {
  width: 34px;
  height: 2px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  /* margin: auto; */
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0px;
}
.headright {
  width: 492px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.headright-fabu {
  width: 70px;
  height: 28px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin-right: 13px;
}
.headright-caogaoxiang {
  width: 70px;
  height: 28px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 24px;
}
.headright-cuncaogao {
  width: 70px;
  height: 28px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 24px;
}
.head-right-one,
.head-right-three {
  display: flex;
  align-items: center;
}
.head-right-one div {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 23px;
  margin-left: 10px;
}
.head-right-two {
  position: relative;
}
.head-right-one img {
  width: 30px;
  height: 30px;
}
.head-right-two img {
  width: 20px;
  height: 18px;
}
.redkuai {
  position: absolute;
  left: 11px;
  top: -4px;
  width: 15px;
  height: 11px;
  background: rgba(255, 0, 82, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  opacity: 0.5;
  border-radius: 4px;
}
.head-right-three img {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  margin-left: 30px;
}

textarea:focus {
  border: 1px solid rgba(172, 172, 172, 1);
  outline: none;
}
textarea {
  line-height: 40px;
  text-indent: 10px;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
}

textarea::placeholder {
  color: rgba(172, 172, 172, 1) !important;
}
</style>

<style>
.ck-content {
  min-height: 443px;
  margin-top:0!important;
  padding: 100px 30px 0 !important ;

  border: none !important;
  overflow: hidden;
  overflow-y: scroll;
}

.ck-focused {
  box-shadow: none !important;
}

/* ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-blurred */
*::-webkit-scrollbar {
  display: none;
}

.el-input__inner {
  border: 1px solid rgba(172, 172, 172, 1) !important;
}
/* .ck-toolbar{
  position: absolute;
  top:0;
  left: 0;
} */

.el-input__inner:focus {
  border: 1px solid rgba(172, 172, 172, 1) !important;
}
.el-message {
  position: fixed;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
